<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>更换头像</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="PIE.js"></script>
    <script src="js/self.js"></script>

</head>
<body class='bcf'>
<div class="theme-popover-mask"></div>
<div id="photoclip" class="photoclip pa of bcf" style="display: block">
    <div class="detailTop w100 of">
        <div class="w100 of tc c3 f18" style="line-height: 68px;border-bottom: 1px solid #E7E7E7">
            更换头像
        </div>
    </div>
    <div class="container jz w100 of">
        <div class="w100 of jz">
            <section id="touxiangClip" class="touxiangClip w100 bcf of">
                <div id="clipArea"></div>
                <div class="w100 of clearfix" style="width: 80%;margin: 9px auto;">
                    <button type="button" id="fileFake" class="choosePic fl" onclick="choosePic();">选择图片</button>
                    <input type="file" id="file">
                    <button type="button" id="clipBtn" class="choosePic fr" style="background:#ccccff;">截取提交</button>
                </div>
                <div id="view"></div>
                <P class="w100 tc c6 f12 mgt10">截图预览</P>
                <div class="w100 of mgb32 mgt10">
                    <button type="button" id="clipOk" class="cf jz db" onclick="javascript:history.back();">确定</button>
                </div>
            </section>
            <script src="js/iscroll-zoom.js"></script>
            <script src="js/hammer.js"></script>
            <script src="js/lrz.all.bundle.js"></script>
            <script src="js/jquery.photoClip.js"></script>
            <script>
                function choosePic() {
                    $("#file").trigger("click");
                }


                //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
                var clipArea = new bjj.PhotoClip("#clipArea", {
                    size: [150, 150],
                    outputSize: [150, 150],
                    file: "#file",
                    view: "#view",
                    ok: "#clipBtn",
                    loadStart: function() {
                        console.log("照片读取中");
                    },
                    loadComplete: function() {
                        console.log("照片读取完成");
                    },
                    clipFinish: function(dataURL) {
                        console.log(dataURL);
                        saveImageInfo();
                    }
                });
                //                    clipArea.destroy();


                //图片上传
                function saveImageInfo() {
                    var filename = $('#view').attr('fileName');
                    var img_data = $('#view').attr('src');
                    if(img_data==""){alert('null');}
                    $.post("这里填写图片获取的网址", {image: img_data}, function (data) {
                        if (data != '') {
                            //console.info(data);
                            //data 为返回文件名；
                            alert('提交成功');
                            history.back();
                        }
                    });
                }

            </script>
            <style>
                #clipArea {
                    margin: 3% 8%;
                    height: 200px;
                }
                #file{
                    display: none;
                }
                #view {
                    margin: 0 auto;
                    width: 110px;
                    height: 110px;
                }
                #clipOk{
                    width: 96%;
                    display: block;
                    height: 40px;
                    line-height:40px;
                    background:#0066ff;
                }
            </style>
        </div>
    </div>
</div>
</body>
</html>